<template>
    <div class="containter">
        <div class="step">
            <ol class="titt">
                <el-badge :value="item.num" :max="99" :hidden="item.num == 0 || item.num == 'a'" class="item" v-for="(item, index) in list" :key="index">
                    <el-button class="button" size="mini" :class="activeIndex == index?'cur':''" :disabled="item.num == 0" @click="goAssignBlock('panelRef'+ index,100,index)">{{item.text}}</el-button>
                </el-badge>
            </ol>
        </div>
        <div ref="panelRef0" class="basicInfo basicInfo1">
            <p class="title">关系图谱</p>
            <div class="relationship">
                <RelationGraph ref="seeksRelationGraph" :options="graphOptions"/>
            </div>
        </div>
        <div ref="panelRef1" class="basicInfo basicInfo1">
            <p class="title">企业图谱</p>
            <div class="relationship">
                <RelationGraph ref="seeksEnterpriseGraph" :options="userGraphOptions"/>
            </div>
        </div>
        <div ref="panelRef2" class="basicInfo basicInfo1">
            <p class="title">股权穿透图</p>
            <div class="relationship">
                <RelationGraph ref="seeksEquityThroughGraph" :options="equityThrouggraphOptions"/>
            </div>
        </div>
        <div ref="panelRef3" class="basicInfo basicInfo1">
            <p class="title">股权结构图</p>
            <div class="relationship">
                <RelationGraph ref="seeksEquityStructureGraph" :options="equityThrouggraphOptions"/>
            </div>
        </div>
    </div>
</template>

<script>
import RelationGraph from 'relation-graph'
import {gxPersonByCo,qyPic,gqct,getGdxx} from '@/api/portay'
export default {
    components: { RelationGraph },
    props:['comInfo'],
    data() {
        return {
            activeIndex:'a',
            list:[
                {text:'关系图谱',num:'a',disabled:false},
                {text:'企业图谱',num:'a',disabled:false},
                {text:'股权穿透图',num:'a',disabled:false},
                {text:'股权结构图',num:'a',disabled:false},
            ],
            //关系图谱
            graphOptions: {
                allowSwitchLineShape: false,
                allowSwitchJunctionPoint: false,
                allowShowMiniToolBar: true,
                defaultJunctionPoint: 'border'
            },
            //企业图谱
            userGraphOptions: {
                'backgrounImage': '',
                'backgrounImageNoRepeat': true,
                'layouts': [
                    {
                        'label': '手工',
                        'layoutName': 'fixed',
                        'layoutClassName': 'seeks-layout-fixed',
                        'defaultJunctionPoint': 'border',
                        'defaultNodeShape': 0,
                        'defaultLineShape': 1
                    }
                ],
                'defaultNodeBorderWidth': 0,
                'defaultNodeShape': 1,
                'allowShowMiniNameFilter': false,
                'allowShowMiniToolBar': true,
                'defaultJunctionPoint': 'lr',
                'defaultLineShape': 2
            },
            //股权穿透图---股权结构图
            equityThrouggraphOptions: {
                'layouts': [
                    {
                        'label': '中心',
                        'layoutName': 'tree',
                        'layoutClassName': 'seeks-layout-tree',
                        'defaultJunctionPoint': 'border',
                        'defaultNodeShape': 0,
                        'defaultLineShape': 1,
                        'min_per_width': 100,
                        'max_per_width': 300,
                        'min_per_height': 50,
                    }
                ],
                'defaultLineMarker': {
                    'markerWidth': 12,
                    'markerHeight': 12,
                        'refX': 6,
                        'refY': 6,
                        'data': 'M2,2 L10,6 L2,10 L6,6 L2,2'
                },
                'defaultNodeShape': 1,
                'defaultLineShape': 2,
                'defaultJunctionPoint': 'tb',
                'defaultNodeBorderWidth': 1,
                'defaultNodeWidth': '30',
                'defaultNodeHeight': '300'
            }
        }
    },
    created() {
        
    },
    watch: {
        'comInfo': {
            handler(newVal, oldVal) {
                if(newVal.shtyxydm){
                    this.$nextTick(()=>{
                        this.gxPersonByCo();
                        this.qyPic();
                        this.gqct();
                        this.getGdxx();
                    })
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted(){
        
    },
    methods: {
        //关系图谱数据
        gxPersonByCo(){
            gxPersonByCo({TYSHXYDM:this.comInfo.shtyxydm}).then(res=>{
                let rootId = this.comInfo.qymc;
                let nodes = [{id: rootId, text: rootId, color:'#02a7f0',width: 150, height: 150,offset_x: -40,fontColor: '#fff'}];
                let links = [];
                res.data.listGqxx.forEach(item=>{
                    let node = {id: item.xm, text: item.xm, color:'#ec808c',fontColor: '#000'}
                    let link = {from: item.xm, to: item.qymc, text: item.zw,lineColor:'#7c7c7c',fontColor:'#797979'}
                    nodes.push(node)
                    links.push(link)
                })
                this.getRelationship(rootId,nodes,links);

            })
        },
        //关系图谱
        getRelationship(rootId,nodes,links){
            let __graph_json_data = {
                rootId: rootId,
                nodes: nodes,
                links: links
            }
            this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
                // Called when the relation-graph is completed 
            })
        },
        //企业图谱数据
        qyPic(){
            qyPic({TYSHXYDM:this.comInfo.shtyxydm}).then(res=>{
                let entname = this.comInfo.qymc;
                let invs = [];
                let persons = [];
                let asInvs = [];
                let branchs = [];
                res.data.listGdxx.forEach(item=>{
                    let inv = {id: item.gdxm+(item.id+''), text: item.gdxm, desc: item.zzgbbl}
                    invs.push(inv)
                })
                res.data.listGqxx.forEach(item=>{
                    let person = {id: item.xm+(item.id+''), text: item.xm, desc: item.zw}
                    persons.push(person)
                })
                if(res.data.listDwtz){
                    res.data.listDwtz.forEach(item=>{
                        let asInv = {id: item.tzqymc+(item.id+''), text: item.tzqymc, desc: item.cgbl}
                        asInvs.push(asInv)
                    })
                }else{
                    asInvs.push({id: '无对外投资', text: '无对外投资', desc: ''})
                }
                if(res.data.listFzjg){
                    res.data.listFzjg.forEach(item=>{
                        let branch = {id: item.fzjgmc+(item.id+''), text: item.fzjgmc, desc: ''}
                        branchs.push(branch)
                    })
                }else{
                    branchs.push({id: '无分支机构', text: '无分支机构', desc: ''})
                }
                
                this.getEnterprise(entname,invs,persons,asInvs,branchs)
            })
        },
        //企业图谱
        getEnterprise(entname,invs,persons,asInvs,branchs){
            let _orign_data = {
                entname: entname,
                invs: invs,
                persons: persons,
                asInvs: asInvs,
                branchs: branchs
            }
            let _graphSetting = this.$refs.seeksEnterpriseGraph.graphSetting
            this.$refs.seeksEnterpriseGraph.graphSetting.defaultLineShape = 1
            // 手工设置节点的坐标
            let _center = {
                x: (_graphSetting.viewSize.width) / 2 - _graphSetting.canvasOffset.x,
                y: (_graphSetting.viewSize.height) / 2 - _graphSetting.canvasOffset.y
            }
            let graphData = {
                rootId: 'root',
                nodes: [],
                links: []
            }
            // 添加根节点和虚拟节点
            let rootNode = { id: graphData.rootId, name: _orign_data.entname, styleClass: 'c-g-center', color: '#02a7f0', width: 250, height: 50, x: _center.x - 125, y: _center.y - 25 }
            let invRootNode = { id: 'invRoot', name: '股东', styleClass: 'c-g-group-node', color: '#FFC5A6', width: 100, height: 50 }
            let personRootNode = { id: 'personRoot', name: '高管', styleClass: 'c-g-group-node', color: '#72eaae', width: 100, height: 50 }
            let asinvRootNode = { id: 'asinvRoot', name: '对外投资', styleClass: 'c-g-group-node', color: '#FFBEC1', width: 100, height: 50 }
            let branchRootNode = { id: 'branchRoot', name: '分支机构', styleClass: 'c-g-group-node', color: '#FFA1F8', width: 100, height: 50 }
            invRootNode.x = _center.x - 200 - invRootNode.width
            invRootNode.y = _center.y - 130
            personRootNode.x = _center.x - 200 - personRootNode.width
            personRootNode.y = _center.y + 90
            asinvRootNode.x = _center.x + 200
            asinvRootNode.y = _center.y - 130
            branchRootNode.x = _center.x + 200
            branchRootNode.y = _center.y + 90
            // 添加节点数据到graphData
            graphData.nodes.push(rootNode)
            graphData.nodes.push(invRootNode)
            graphData.nodes.push(personRootNode)
            graphData.nodes.push(asinvRootNode)
            graphData.nodes.push(branchRootNode)
            // 添加根节点和虚拟节点之间的关系，并将关系数据放入graphData
            graphData.links.push({ from: rootNode.id, to: invRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
            graphData.links.push({ from: rootNode.id, to: personRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
            graphData.links.push({ from: rootNode.id, to: asinvRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
            graphData.links.push({ from: rootNode.id, to: branchRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 })
            // 将股东加入虚拟节点"股东"
            _orign_data.invs.forEach((thisNode, _index) => {
                thisNode.width = 200
                thisNode.x = invRootNode.x - 300 - thisNode.width
                thisNode.y = invRootNode.y + _index * 30 * -1 + 30
                graphData.nodes.push(thisNode)
                graphData.links.push({ from: invRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFC5A6', arrow: 'none', lineShape: 4 })
            })
            // 将高管加入虚拟节点"高管"
            _orign_data.persons.forEach((thisNode, _index) => {
                thisNode.width = 200
                thisNode.x = personRootNode.x - 200 - thisNode.width
                thisNode.y = personRootNode.y + _index * 30
                graphData.nodes.push(thisNode)
                graphData.links.push({ from: personRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#72eaae', arrow: 'none', lineShape: 4 })
            })
            // 将对外投资企业加入虚拟节点"对外投资"
            _orign_data.asInvs.forEach((thisNode, _index) => {
                thisNode.x = asinvRootNode.x + 300
                thisNode.y = asinvRootNode.y + _index * 30 * -1 + 30
                graphData.nodes.push(thisNode)
                graphData.links.push({ from: asinvRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFBEC1', lineShape: 4 })
            })
            // 将分支机构加入虚拟节点"分支机构东"
            _orign_data.branchs.forEach((thisNode, _index) => {
                thisNode.x = branchRootNode.x + 300
                thisNode.y = branchRootNode.y + _index * 30
                graphData.nodes.push(thisNode)
                graphData.links.push({ from: branchRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFA1F8', lineShape: 4 })
            })
            this.$refs.seeksEnterpriseGraph.setJsonData(graphData, (seeksRGGraph) => {
            })
        },
        //股权穿透数据
        gqct(){
            gqct({TYSHXYDM:this.comInfo.shtyxydm}).then(res=>{
                let rootId = this.comInfo.qymc;
                let nodes = [{id: rootId, text: rootId, color:'#02a7f0',fontColor: '#fff'}];
                let links = [];
                res.data.forEach(item=>{
                    let node = {id: item.qymc, text: item.qymc, color:'#fff',fontColor: '#000',borderColor:'#02a7f0'}
                    let link = {from: item.gdxm, to: item.qymc, text: '控股：'+item.zzgbbl,lineColor:'#7c7c7c',fontColor:'#02a7f0'}
                    nodes.push(node)
                    links.push(link)
                })
                this.getEquityThrough(rootId,nodes,links);
            })
        },
        //股权穿透图
        getEquityThrough(rootId,nodes,links){
            let __graph_json_data = { 
                'rootId': rootId, 
                nodes: nodes,
                links: links
            }
             __graph_json_data.nodes.forEach(thisNode => {
                if (thisNode.text === rootId) {
                    thisNode.width = 300
                    thisNode.height = 50
                    thisNode.offset_x = -80
                }
             })
            this.$refs.seeksEquityThroughGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
                // 这些写上当图谱初始化完成后需要执行的代码
            })
        },
        //股权结构图数据
        getGdxx(){
            getGdxx({TYSHXYDM:this.comInfo.shtyxydm}).then(res=>{
                let rootId = this.comInfo.qymc;
                let nodes = [{id: rootId, text: rootId, color:'#02a7f0',fontColor: '#fff'}];
                let links = [];
                res.data.forEach(item=>{
                    let node = {id: item.gdxm, text: item.gdxm, color:'#fff',fontColor: '#000',borderColor:'#02a7f0'}
                    let link = {from: item.gdxm, to: rootId, text: '控股：'+item.zzgbbl,lineColor:'#7c7c7c',fontColor:'#02a7f0'}
                    nodes.push(node)
                    links.push(link)
                })
                this.getEquityStructure(rootId,nodes,links);
            })
        },
        //股权结构图
        getEquityStructure(rootId,nodes,links){
            let __graph_json_data = { 
                'rootId': rootId, 
                nodes: nodes,
                links: links
            }
            __graph_json_data.nodes.forEach(thisNode => {
                if (thisNode.text === rootId) {
                    thisNode.width = 300
                    thisNode.height = 50
                    thisNode.offset_x = -80
                    thisNode.offset_y = 100
                }
             })
            this.$refs.seeksEquityStructureGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
                // 这些写上当图谱初始化完成后需要执行的代码
            })
        },
        // 点击导航栏，滚动条移动到内容所对应的位置
        goAssignBlock(el, speed,index) {
            this.activeIndex = index;
            let windowH = window.innerHeight; //浏览器窗口高度
            let h = this.$refs[el].offsetHeight; //模块内容高度
            
            let t = this.$refs[el].offsetTop; //模块相对于内容顶部的距离
            let top = t - (windowH - h) / 2; //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop; //滚动条距离顶部高度
            let currentTop = scrollTop; //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
            let requestId;
            //采用requestAnimationFrame，平滑动画
            function step() {
                //判断让滚动条向上滚还是向下滚
                if (scrollTop < top) {
                if (currentTop <= top) {
                    //   window.scrollTo(x,y) y为上下滚动位置
                    window.scrollTo(0, currentTop);
                    requestId = window.requestAnimationFrame(step);
                } else {
                    window.cancelAnimationFrame(requestId);
                }
                //向下滚动
                currentTop += speed;
                } else {
                if (top <= currentTop) {
                    //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
                    window.scrollTo(0, currentTop - speed);
                    requestId = window.requestAnimationFrame(step);
                } else {
                    window.cancelAnimationFrame(requestId);
                }
                //向上滚动
                currentTop -= speed;
                }
            }
            window.requestAnimationFrame(step);
        }
    }
}
</script>

<style scoped="scoped" lang="scss">
.containter{
    width: 100%;
    .step{
        ol.titt {
            height: 160px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            margin: 0;
            padding: 0;
            font-size: 14px;
            position: fixed;
            top: 350px;
            right: 24px;
            z-index: 999;
        }
        ol.titt .button {
            width: 150px;
            margin: 0;
        }
        ol.titt .button.cur {
            background-color: #5591f5;
            color: #fff;
        }
    }
    .basicInfo{
        background: #fff;
        border-radius: 10px;
        width: 100%;
        height: 240px;
        padding: 12px 174px 12px 24px;
        margin-top: 20px;
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chart{
            display: flex;
            justify-content: space-between;
            align-items: center;
            #trend,#type{
                width: 700px;
                height: 400px;
                
                border-radius: 4px;
                padding: 12px;
                box-shadow: 0 0 10px #e8eaef;
            }
        }
    }
    .basicInfo1{height: 700px;}
    .relationship{height: 600px;}
}
.morexxfp{
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    div{
        margin-right: 24px;
    }
}
.title{
    font-size: 18px;
    font-weight: 900;
}
.glqy{
    color: #4a8bf6;
    margin-left: 24px;
}
.glqy:hover{
    cursor: pointer;
}
.item {
  margin-top: 4px;
  margin-right: 16px;
}
</style>
<style>
.dialog {
  border-radius: 10px;
  padding-bottom: 50px;
}
.el-dialog {
     display: flex;
     flex-direction: column;
     margin:0 !important;
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
     /*height:600px;*/
     max-height:calc(100% - 200px);
     max-width:calc(100% - 30px);
}
.el-dialog .el-dialog__body {
     flex:1;
     overflow: auto;
}
</style>